<template>
  <header class="overheader center-flex">
    <div class="add">
      <span @click="$router.push('OvertimeSetting')">设置</span>
      <span @click="$router.push('overtimeEdit')">添加</span>
    </div>
    <div class="center-flex user-container">
      <div v-if="avatar" class="avatar-box">
        <img :src="avatar" alt="头像">
      </div>
      <!-- <div class="nickname">{{nickname}}</div> -->
    </div>
    <div class="wrap">
      <div @click="open" class="time-box center-flex">{{currentTime}}</div>
    </div>
    <div class="info-list">
      <div class="info-item center-flex">
        <div class="label">工资总计</div>
        <div class="value">{{total}}</div>
      </div>
      <div class="info-item center-flex">
        <div class="label">基本工资</div>
        <div class="value">{{baseSalary}}</div>
      </div>
      <div class="info-item center-flex">
        <div class="label">加班工资</div>
        <div class="value">{{overtimeSalary}}</div>
      </div>
      <div class="info-item center-flex">
        <div class="label">加班时长</div>
        <div class="value">{{time}}</div>
      </div>
    </div>
    <mt-datetime-picker @confirm="confirm" ref="picker" type="date" v-model="value" />
  </header>
</template>

<script>
import authority from '@/utils/authority'
import setting from './setting.js'

const { avatar, nickname } = authority.get() || {}

export default {
  props: {
    data: {
      type: Array,
      defualt: () => []
    }
  },
  data() {
    const { baseSalary = 0 } = setting.get()
    return {
      avatar,
      nickname,
      value: new Date(),
      baseSalary
    }
  },
  computed: {
    currentTime() {
      const d = this.value
      const year = d.getFullYear()
      const month = d.getMonth() + 1
      return `${year}年${month > 9 ? month : ('0' + month)}月`
    },
    overtimeSalary() {
      const { data } = this
      return data.reduce((total, current) => total + current.overtime_salary, 0)
    },
    total() {
      return this.baseSalary + this.overtimeSalary
    },
    time() {
      const { data } = this
      return data.reduce((total, current) => total + current.overtime, 0)
    }
  },
  methods: {
    open() {
      this.$refs.picker.open()
    },
    confirm() {
      const d = this.value
      const year = d.getFullYear()
      const month = d.getMonth() + 1
      this.$emit('fetch', { year, month: month > 9 ? month : `0${month}` })
    }
  }
}
</script>

<style lang="scss">
.overheader {
  .picker-slot-center:nth-child(3) {
    display: none;
  }
}
</style>


<style lang="scss" scoped>
.overheader {
  flex-direction: column;
  color: white;
  height: 3.5rem;
  width: 100%;
  background: linear-gradient(#54a4ee, #65bef2);
  position: relative;
}
.time-box {
  padding: 0 0.2rem;
  height: 0.4rem;
  border-radius: 0.325rem;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: white;
  font-size: 0.28rem;
  position: absolute;
  top: 0.2rem;
  left: 0.2rem;
}
.add {
  position: absolute;
  top: 0.2rem;
  right: 0.2rem;
  span {
    padding: 0 0.2rem;
  }
}
.user-container {
  flex-direction: column;
  .avatar-box {
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto;
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .nickname {
    color: white;
    font-size: 0.34rem;
  }
}
.info-list {
  width: 100%;
  padding-top: 0.3rem;
  display: flex;
  justify-content: space-around;
  .info-item {
    flex-direction: column;
  }
  .label {
    font-size: 0.24rem;
    opacity: 0.8;
  }
  .value {
    font-size: 0.38rem;
    padding-top: 0.2rem;
  }
}
</style>
